<template>
	<div clas="app">
		<div class="order_choose" id="products">
			<div class="order_choose-list" v-for="(item,index) in tags" @click="swichNav(index,item.id)" :key="item.id" v-if="tags.length>1">
				<div>
					<text :class="[currentTab==index ? 'order_choose_title' : 'order_choose_title_no']">{{item.name}}</text>
					<text :class="[currentTab==index ? 'order_choose_subtitle' : 'order_choose_no_subtitle']">{{item.memo}}</text>
				</div>

			</div>
		</div>
		<slider :index="currentTab" class="swiper-box" @change="bindChange" :style="{height:allHeight}">
			<block v-for="(item,index) in tags" :key="item.id">
				<div class="column_box" v-if="currentTab===index">
					<block v-for="items in productList">
						<row :product="items"></row>
					</block>
				</div>
				<noData noDataText="暂无商品" v-if="productList.length==0"></noData>
			</block>
		</slider>
	</div>

</template>
<script>
	import {
		list
	} from '../../../../api/product'

	import {
		list as tagList
	} from '../../../../api/tag'
	const eeui = app.requireModule('eeui');
	import noData from '../../../../components/noData/noData.vue'
	import row from '../../../../components/product/row.vue'
	export default {
			name: 'productRow',
			data() {
				return {
					tagIds: [],
					tagId: '',
					scrollTop: '',
					tags: [],
					allHeight: 'height:600px',
					length: '',
					pageId: 18,
					componentsList: [],
					productList: [],
					winWidth: 0,
					winHeight: 0,
					currentTab: 0,
					pageSize: 20,
				}
			},
			created() { // 在实例创建完成后被立即调用
				if(!this.pageNum){
					this.pageNum=1
				}

				this.loadTags()
			},
			props: ['content','pageNum'],
			watch:{
				pageNum(newVal,oldVal){
					console.log(oldVal+'-----'+newVal)
					if(newVal!=oldVal&&this.newVal!=''&&newVal!=0){
						this.loadProduct()
					}
				}
			},
			methods: {
				loadTags() {
					var _this = this;
					if (this.content.tagids != null) {
						this.tagIds = this.content.tagids.split(',');
						for (var i = 0; i < this.tagIds.length; i++) {
							this.tagIds[i] = parseInt(this.tagIds[i])
						}
					}
					tagList({
						pageNum: this.pageNum,
						pageSize: 5,
						mchId: this.getGlobalData().mchId,
						type: '3',
						tagIds: this.tagIds,
					}).then(res => {
						_this.tags = res.data.data
						_this.tagId = this.tags[0].id
						setTimeout(() => {
							_this.pageNum = 0
							_this.productList = []
							_this.loadProduct()
						}, 500)
					})

				},
				bindChange(e){
//					eeui.loading();
					this.tagId=this.tags[e.index].id
					this.currentTab=e.index
					 this.pageNum = 0
					 this.productList = []
					 this.loadProduct()
//					 setTimeout(()=>{
//					 	 eeui.loadingClose();
//					 },500)

				},
				swichNav(index, id) {
					eeui.loading();
					this.pageNum = 0
					this.tagId = id
					this.productList = []
					this.loadProduct()
					var that = this;
					setTimeout(()=>{
						 eeui.loadingClose();
					},500)
					if (this.currentTab === index) {
						return false;
					} else {

						this.currentTab = index

					}
				},
				loadProduct(callback) {
					var _this = this
					if(this.pageNum==1){
						_this.productList=[]
					}
					list({
						tagIds: this.tagId,
						mchId: this.getGlobalData().mchId,
						pageSize: _this.pageSize,
						pageNum: _this.pageNum,
					}).then(res => {
						 res.data.data.forEach(item=>{
							 item.thumbnail = _this.thumbnail(item.thumbnail, 250, 250)
							_this.productList.push(item)
						})
						if (_this.productList.length  == 0) {
							  _this.allHeight =   600 + 'px';
						} else {
							_this.data.allHeight = (_this.data.productList.length*285 ) + 'px'
						}

						if (callback) {
							callback()
						}
					})
				},
			},
			components: {
				noData,
				row
			},
		}
	</script>

	<style scoped>
		.app{
			flex:1;
		}
		.order_choose {
			width: 750px;
			text-align: center;
			margin-top: 30px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
            margin-bottom: 20px;
		}

		.order_choose-list {
			width: 150px;
			/* height: 30px; */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
		}

		.order_choose_title_no {
			font-size: 30px;
      font-weight: 400;
			color: rgba(26, 26, 30, 1);
			display: block;
			lines: 1;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 130px;
			text-align: center;
		}

		.order_choose_title {
			text-align: center;
			font-size: 30px;
      font-weight: 400;
			color: rgba(215, 38, 28, 1);
			display: block;
			lines: 1;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 130px;
		}

		.swiper-box {
			flex: 1;
			display: flex;

			overflow: hidden;
		}

		/* .swiper-box view {
		  text-align: center;
		} */

		.order_choose_line {
			width: 49px;
			height: 10px;
			border-radius: 1px;
		}

		.order_choose_line_no {
			background: linear-gradient(0deg, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
		}

		.column_box {
			flex-wrap: wrap;
			width: 750px;
			display: flex;

		}

		/*.empty {*/
		/*	margin-left: 50%;*/

		/*}*/

		.order_choose_subtitle {
			font-size: 22px;
			width: 130px;
			height: 40px;
			border-radius: 30px;
			color: white;
			background-color: red;
			text-align: center;
			line-height: 40px;
			display: block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.order_choose_no_subtitle {
			font-size: 22px;
			width: 130px;
			height: 40px;
			border-radius: 30px;
			text-align: center;
			line-height: 40px;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	</style>
